<%@page pageEncoding="UTF-8" isELIgnored="false"  %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:set var="path" value="${pageContext.request.contextPath}"/>


<script>

    $(function(){
        pageInit();

        //删除
        $("#delCate").click(function(){
            //判断用户有没有选择数据
            /*
            * getGridParam:返回请求的参数信息
            * selrow:最后选择行的id
            * */
            var rowId=$("#cateTable").jqGrid("getGridParam","selrow");

            if(rowId!=null){

                $.post("${path}/category/edit",{"id":rowId,"oper":"del"},function (data) {
                    //设置提示信息
                    $("#message").html(data.message);

                    //展示警告框
                    $("#showMsg").show();

                    setTimeout(function () {
                        $("#showMsg").hide();
                    },3000);

                },"JSON");
            }else{
                //设置提示信息
                $("#message").html("请选择一行");

                //展示警告框
                $("#showMsg").show();

                setTimeout(function () {
                    $("#showMsg").hide();
                },3000);

            };
        });

        //展示详情
        $("#queryCate").click(function(){

            var rowId=$("#cateTable").jqGrid("getGridParam","selrow");


            if(rowId!=null){

                //获取行数据
                var row=$("#cateTable").jqGrid("getRowData",rowId);

                $("#id").val(row.id);
                $("#catename").val(row.cateName);
                $("#levels").val(row.levels);


                //展示莫态框
                $("#showModal").modal('show');

            }else{
                $("#message").html("请选择一行");

                //展示警告框
                $("#showMsg").show();

                setTimeout(function () {
                    $("#showMsg").hide();
                },3000);
            }
        });

        //提交修改
        $("#changeCategory").click(function () {

            var ids= $("#id").val();
            var cateNames=$("#catename").val();

            $.ajax({
                url:"${path}/category/edit",
                type:"post",
                data:{"id":ids,"cateName":cateNames,"oper":"edit"},
                dataType:"JSON",
                success:function(data){

                    //关闭模态框
                    $("#showModal").modal('hide');

                    //刷新页面
                    $("#cateTable").trigger("reloadGrid");

                    $("#message").html(data.message);

                    //展示警告框
                    $("#showMsg").show();

                    setTimeout(function () {
                        $("#showMsg").hide();
                    },3000);
                }
            });
        })
    });

    function pageInit(){
        $("#cateTable").jqGrid({
            url : "${path}/category/queryByPage",
            editurl:"${path}/category/edit",
            datatype : "json",
            rowNum : 5,
            rowList : [ 5, 10, 20, 30 ],
            pager : '#catePage',
            sortname : 'id',
            viewrecords : true,
            styleUI:"Bootstrap",
            autowidth:true,
            height:"auto",
            colNames : [ 'ID', '类别名','级别' ],
            colModel : [
                {name : 'id',index : 'id',  width : 55},
                {name : 'cateName',editable:true,index : 'invdate',width : 90,align : "center"},
                {name : 'levels',  width : 55},

            ],
            subGrid : true,  //开启子表格
            // subgrid_id:是在创建表数据时创建的div标签的ID
            //row_id是该行的ID
            subGridRowExpanded : function(subgrid_id, row_id) {
                addSubGrid(subgrid_id, row_id);
            }
        });
        $("#cateTable").jqGrid('navGrid', '#catePage', {add : true,addtext:"添加",edit : true,del : true},
            {closeAfterAdd:true}, //添加
            {closeAfterEdit:true},
            {
                //删除成功之后触发的function,接收删除返回的提示信息,在页面做展示
                closeAfterDel:true,
                afterSubmit:function (data) {
                    console.log(data)

                    //设置提示信息
                    $("#message").html(data.responseJSON.message);

                    //展示警告框
                    $("#showMsg").show();

                    setTimeout(function () {
                        $("#showMsg").hide();
                    },3000);

                    return "hello";
                }
            }, //删除
        );
    }


    //开启子表格的样式
    function addSubGrid(subgridId, rowId){

        var subgridTableTd= subgridId + "Table";
        var pagerId= subgridId+"Page";


        $("#"+subgridId).html("" +
            "<table id='"+subgridTableTd+"' />" +
            "<div id='"+pagerId+"' />"
        );



        $("#" + subgridTableTd).jqGrid({
            url : "${path}/category/queryByTwoCategory?parentId=" + rowId,
            editurl:"${path}/category/edit?parentId=" + rowId,
            datatype : "json",
            rowNum : 20,
            pager : "#"+pagerId,
            sortname : 'num',
            sortorder : "asc",
            styleUI:"Bootstrap",
            autowidth:true,
            height:"auto",
            colNames : [ 'ID', '类别名',"级别"],
            colModel : [
                {name : "id",  index : "num",width : 80,key : true},
                {name : "cateName",editable:true,index : "total",width : 70,align : "center",sortable : false},
                {name : 'levels',hidden : true,  width : 55}
            ]
        });

        $("#" + subgridTableTd).jqGrid('navGrid',"#" + pagerId, {edit : true,add : true,del : true},
            {},
            {closeAfterAdd:true},
            {}
        );
    }


</script>


<%--设置面板--%>
<div class="panel panel-success">

    <%--面板头--%>
    <div class="panel panel-heading">
        <h2>类别信息</h2>
    </div>

    <%--警告框--%>
    <div id="showMsg" style="width:300px;display: none" class="alert alert-warning alert-dismissible" role="alert">
        <span id="message"/>
    </div>

    <%--标签页--%>
    <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">类别管理</a></li>
    </ul>

    <%--按钮组--%>
    <div>
        <button id="delCate" class="btn btn-info">删除类别</button>&emsp;
        <button id="queryCate" class="btn btn-info">类别详情</button>
    </div><br>

    <%--表单--%>
    <table id="cateTable" />

    <%--分页工具栏--%>
    <div id="catePage" />

</div>

<div id="showModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">

            <%--标题--%>
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="gridSystemModalLabel">类别详情</h4>
            </div>
            <%--内容--%>
            <div class="modal-body">
                <form id="cateForm">
                    <div class="form-group">
                        <label for="id" class="control-label">Id:</label>
                        <input disabled name="id" type="text" class="form-control" id="id">
                    </div>
                    <div class="form-group">
                        <label for="catename" class="control-label">类别名:</label>
                        <input name="cateName" type="text" class="form-control" id="catename">
                    </div>
                    <div class="form-group">
                        <label for="levels" class="control-label">级别:</label>
                        <input disabled name="levels" type="text" class="form-control" id="levels">
                    </div>
                </form>
            </div>

            <%--按钮--%>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="changeCategory">提交修改</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->